<template>
    <div style="width: 600px;">
        <a @click="tiaozhuan">登录页面</a>
        <bk-form :label-width="200" :model="formData" :rules="rules" ref="validateForm1">
            <bk-form-item label="用户名:" :property="'username'" :required="true">
                <bk-input v-model="formData.username" placeholder="请输入3到10个以内的字符"></bk-input>
            </bk-form-item>
            <bk-form-item label="密码:" :property="'password'" :required="true">
                <bk-input v-model="formData.password" placeholder="请输入6到15个以内的字符" type="password"></bk-input>
            </bk-form-item>
            <bk-form-item label="身份" :required="true" :property="'role'">
                <bk-radio-group v-model="formData.role">
                    <bk-radio :value="'商家'">商家</bk-radio>
                    <bk-radio :value="'客户'">客户</bk-radio>
                </bk-radio-group>
            </bk-form-item>
            <bk-form-item>
                <bk-button style="margin-right: 3px;" theme="primary" title="登录" @click.stop.prevent="checkData" :loading="isChecking">登录</bk-button>
                <bk-button ext-cls="mr5" theme="default" title="取消">取消</bk-button>
            </bk-form-item>
        </bk-form>
    </div>
</template>

<script>
    
    import { mapGetters } from 'vuex'

    import { bus } from '@/common/bus'
    export default {
        name: 'monitor-navigation',
        data () {
            return {
                formData: {
                    username: '',
                    password: '',
                    role: ''
                },
                rules: {
                    username: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            min: 1,
                            message: '不能小于1个字',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '不能多于10个字符',
                            trigger: 'blur'
                        }
                    ],
                    password: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            min: 6,
                            message: '不能小于6个字',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '不能多于15个字符',
                            trigger: 'blur'
                        }
                    ],
                    role: [
                        {
                            required: true,
                            message: '必选项',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        computed: {
            ...mapGetters(['mainContentLoading']),
            curHeaderNav () {
                return this.header.list[this.header.active] || {}
            }
        },
        created () {
            const platform = window.navigator.platform.toLowerCase()
            if (platform.indexOf('win') === 0) {
                this.systemCls = 'win'
            }
        },
        mounted () {
            const self = this
            bus.$on('show-login-modal', data => {
                self.$refs.bkAuth.showLoginModal(data)
            })
            bus.$on('close-login-modal', () => {
                self.$refs.bkAuth.hideLoginModal()
                setTimeout(() => {
                    window.location.reload()
                }, 0)
            })
        },
        methods: {
            login () {
                const qs = require('qs')
                this.axios({
                    url: '/paper/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        'username': this.formData.username,
                        'password': this.formData.password,
                        'role': this.formData.role
                    })
                }).then(res => {
                    return res.data.result
                })
            },
            handleSelect (id, item) {
                this.nav.id = id
                this.$router.push({
                    name: item.pathName
                })
            },
            handleToggle (v) {
                this.nav.toggle = v
            },
            checkData () {
                this.$refs.validateForm1.validate().then(validator => {
                    this.login()
                }, validator => {
                    // 显示第一个出错位置
                    // alert(validator.content)
                })
            },
            tiaozhuan () {
                this.$router.push({
                    name: 'main'
                })
            }
        }
    }
</script>

<style lang="postcss">
</style>
